// 导入依赖
import { ajax, isLogin } from '../utils/ajax.js';  // 导入ajax函数和isLogin函数
import '../lib/jquery.js';  // 导入jQuery库
import { pwdTest } from '../utils/reg.js';  // 导入密码格式验证函数

// 当文档加载完成后执行
$(document).ready(async function() {
    // CSS 样式字符串，定义两种提示框的样式
    var cssStyle = `
        .error-alert {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 1000;
            text-align: center;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }
        
        .success-alert {
            display: none; /* 初始隐藏 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
            color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            text-align: center;
        }
    `;

    // 创建 <style> 元素并将 CSS 样式插入到头部
    var styleElement = document.createElement('style');
    styleElement.textContent = cssStyle;
    document.head.appendChild(styleElement);

    // 判断用户是否已登录
    let { status, user, token } = await isLogin();
    if (status !== 1) {
        alert('请先登录！');  // 如果未登录，则弹出提示框
        location.href = './login.html';  // 并跳转至登录页面
    }

    // 表单提交事件处理函数
    $('form').on('submit', async function(e) {
        e.preventDefault();  // 阻止表单默认提交行为

        // 获取表单输入的值并去除首尾空格
        let oldPassword = $('.oldpassword').val().trim();  // 原密码
        let newPassword = $('.newpassword').val().trim();  // 新密码
        let rNewPassword = $('.rnewpassword').val().trim();  // 确认新密码

        // 判断是否有输入为空
        if (oldPassword === '' || newPassword === '' || rNewPassword === '') {
            showAlert('密码不能为空');  // 如果有空输入，则显示错误提示框
            return;  // 终止表单提交
        }

        // 校验新密码格式
        if (!pwdTest(newPassword)) {
            showAlert('新密码格式错误');  // 如果新密码格式不符合要求，则显示错误提示框
            return;  // 终止表单提交
        }

        // 判断两次输入的新密码是否一致
        if (newPassword !== rNewPassword) {
            showAlert('两次密码不一致');  // 如果两次输入的新密码不一致，则显示错误提示框
            return;  // 终止表单提交
        }

        // 准备发送到服务器的数据对象
        var data = { id: user.id, oldPassword, newPassword, rNewPassword };

        try {
            // 发送修改密码请求
            var { data: { code } } = await ajax.post('/users/rpwd', data, { headers: { authorization: token } });

            if (code !== 1) {
                showAlert('旧密码错误，请重新输入');  // 如果返回的状态码不为1，则显示错误提示框
                return;  // 终止表单提交
            }

            // 修改密码成功
            localStorage.removeItem('token');  // 删除本地存储的token
            localStorage.removeItem('uid');  // 删除本地存储的用户id
            alert('修改成功，点击确定跳转至登录页面');  // 提示用户密码修改成功
            location.href = './login.html';  // 跳转至登录页面
        } catch (error) {
            console.error('修改密码失败:', error);  // 捕获并打印修改密码失败的错误信息
            showAlert('修改密码失败，请稍后再试。');  // 显示修改密码失败的错误提示框
        }
    });

    // 显示错误提示框的函数
    function showAlert(message) {
        var alertDiv = $('<div></div>')  // 创建一个div元素作为错误提示框
            .text(message)  // 设置错误提示框的文本内容
            .addClass('error-alert')  // 添加error-alert类，设置样式
            .appendTo('body');  // 添加到body元素中

        setTimeout(function() {
            alertDiv.fadeOut(500, function() {
                $(this).remove();  // 2秒后自动消失并移除错误提示框
            });
        }, 2000); // 设置2秒后自动消失
    }

    // 显示成功提示框的函数（未在代码中实际调用）
    function showSuccessAlert(message) {
        var successDiv = $('<div></div>')  // 创建一个div元素作为成功提示框
            .text(message)  // 设置成功提示框的文本内容
            .addClass('success-alert')  // 添加success-alert类，设置样式
            .appendTo('body');  // 添加到body元素中

        setTimeout(function() {
            successDiv.fadeOut(500, function() {
                $(this).remove();  // 2秒后自动消失并移除成功提示框
            });
        }, 2000); // 设置2秒后自动消失
    }
});
